<template>
  <div class="pagecontent" :class="isHideFont ? 'pagecontentflex':''">
    <div class="pagecontent-header">
      <div class="head z_flex">
        <div class="z_flex pointer">
          <div class="tag z_flex">
            <img src="../assets/zy/notice.png" alt />
          </div>
          <div class="info">这是一条公告内容</div>
          <div class="scan">
            查看详情
            <el-icon color="#fff" size="14">
              <ArrowRightBold />
            </el-icon>
          </div>
        </div>
      </div>
      <div class="head1 z_flex">
        <div class="logo">
          <img src="../assets/zy/logo.png" alt />
        </div>
        <div class="content z_flex">
          <div class="list z_flex">
            <div
              :class="item.isSelect && item.text.length <= 2 ? 'select-div select-div-38':item.isSelect && item.text.length > 2 ? 'select-div select-div-66':''"
              v-for="(item,index) in list"
              :key="index"
              @click="toPath(item.path)"
            >{{ item.text }}</div>
          </div>
          <div class="saerch">
            <el-input
              v-model="input2"
              style="width: 280px"
              placeholder="发明专利"
              :suffix-icon="Search"
            />
          </div>
        </div>
        <div class="log z_flex">
          <div class="tips">控制台</div>
          <span class="z_flex" @click="onLogin">登录</span>
          <span class="z_flex" @click="toPath('/register')">注册</span>
        </div>
      </div>
    </div>
    <div class="cont" :class="isHideFont ? 'flex_1':''">
      <RouterView />
    </div>
    <div class="footer" :style="{background: bgColor}" v-if="!isHideFont">
      <div class="tab" :style="{background: bgColor}">
        <div v-for="(item,index) in fontList" :key="index">
          <img :src="getAssetsImages(item.icon)" alt srcset />
          <span>{{ item.text }}</span>
        </div>
      </div>
      <div class="share z_flex">
        <div class="left">
          <div class="view" v-for="(item,index) in linkList" :key="index">
            <span class="title">{{ item.text }}</span>
            <div v-for="(a,b) in item.child" :key="b">{{ a.text }}</div>
          </div>
        </div>
        <div class="right">
          <div class="right-h1">关注或联系我们</div>
          <div class="right-t1">添加知产宝公众号、APP，还可移动管理业务进度</div>
          <div class="right-img">
            <div class="img z_flex">
              <img src alt />
            </div>
            <div class="img z_flex">
              <img src alt />
            </div>
          </div>
          <div class="right-phone">咨询热线：0731-888888或4000 100 100转1</div>
          <div class="btn">
            <el-button color="#0052D9" type="primary">联系我们</el-button>
          </div>
        </div>
      </div>
      <div class="link z_flex">@2023 知产宝科技有限公司 All Rights Reserved 粤ICP备2020078552号</div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Search } from "@element-plus/icons-vue";
const router = useRouter();
const route = useRoute();
let bgColor = ref("f5f7fa");

let list = ref([]);
let isHideFont = ref(false);

watch(
  () => router.currentRoute.value,
  () => {
    getNav();
  }
);
const onLogin = () => { 
  localStorage.clear()
  sessionStorage.clear()
  toPath('/login')
}
const getNav = () => {
  let { path, meta } = router.currentRoute.value;

  let arr = [];
  if (meta && meta.parentPath) {
    let { parentPath, hideFont, fontBgColor } = meta;
    if (fontBgColor) {
      bgColor.value = fontBgColor;
    }
    if (hideFont) {
      isHideFont.value = hideFont;
    } else {
      isHideFont.value = false;
    }
    if (parentPath === "home") {
      const routesContext = import.meta.glob("../router/modules/home.js", {
        eager: true
      });

      Object.keys(routesContext).forEach(v => {
        arr.push(...routesContext[v].default);
      });
    }
    if (arr.length) {
      let _arr = [];
      arr.forEach(item => {
        let { children } = item;
        let toPath = item.path;
        if (children && children.length) {
          toPath = toPath + "/" + children[0].path;
        }

        let meetsPath = toPath.split("/");
        meetsPath = "/" + meetsPath[0];
        let isSelect = false;
        console.log(meetsPath, "meetsPathmeetsPath");
        console.log(toPath, "toPathtoPath");
        console.log(path);
        if (path.indexOf(meetsPath) !== -1) {
          isSelect = true;
        }

        _arr.push({
          text: item.meta.title,
          path: "/" + toPath,
          isSelect
        });
      });

      console.log(_arr, "_arr_arr_arr");
      list.value = _arr;
    }
  } else {
    list.value = [
      {
        text: "产品工具",
        path: "/home"
      },
      {
        text: "服务商城",
        path: "/serviceMall"
      },
      {
        text: "解决方案"
      },
      {
        text: "文档中心"
      },
      {
        text: "关于知产宝"
      },
      {
        text: "合作伙伴"
      }
    ];
  }
};
getNav();

const toPath = url => {
  router.push(url);
};

let fontList = [
  {
    text: "免费体验试用",
    icon: "mianfei"
  },
  { text: "享无忧退款服务", icon: "youxiang" },
  { text: "1V1大客户服务", icon: "v1" },
  { text: "7X24小时服务", icon: "24" }
];

let linkList = [
  {
    text: "热门推荐",
    child: [
      {
        text: "国内商标注册"
      },
      {
        text: "海外商标注册"
      },
      {
        text: "商标查询"
      },
      {
        text: "发明专利"
      },
      {
        text: "专利监控"
      }
    ]
  },
  {
    text: "资源与社区",
    child: [
      {
        text: "解决方案"
      },
      {
        text: "文档中心"
      }
    ]
  },
  {
    text: "支持服务",
    child: [
      {
        text: "公告"
      },
      {
        text: "控制台"
      },
      {
        text: "续费"
      },
      {
        text: "举报平台"
      }
    ]
  },
  {
    text: "关于知产宝",
    child: [
      {
        text: "平台介绍"
      },
      {
        text: "联系我们"
      },
      {
        text: "意见反馈"
      }
    ]
  }
];

const getAssetsImages = name => {
  return new URL(`/src/assets/zy/${name}.png`, import.meta.url).href;
};
</script>
<style lang="scss" scope>
.el-input .el-input__icon {
  color: #202020;
}
.pagecontentflex {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.pagecontent {
  &-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    flex-shrink: 0;
    .head1 {
      height: 62px;
      background: #ffffff;
      box-shadow: 0px 2px 28px 0px #eceef1;

      .logo {
        width: 240px;
        flex-shrink: 0;
        height: 100%;
        color: white;
        display: flex;
        align-items: center;
        img {
          width: 174px;
          height: 33px;
          margin-left: 20px;
        }
      }
      .content {
        flex: 1;
        height: 62px;
        .list {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: Regular;
          color: #202020;
          height: 62px;
          div {
            height: 62px;
            line-height: 62px;
            padding: 0 20px;
            cursor: pointer;
          }
          div:first-of-type {
            padding-left: 5px;
          }
          .select-div {
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Semibold;
            font-weight: 600;
            color: #0052d9;
            position: relative;
          }
          .select-div-66::after {
            content: "";
            position: absolute;
            width: 66px;
            height: 2px;
            background: #0052d9;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
          }
          .select-div-38::after {
            content: "";
            position: absolute;
            width: 38px;
            height: 2px;
            background: #0052d9;
            bottom: 0;
            left: 0;
          }
        }
        .saerch {
          flex: 1;
          height: 36px;
          display: flex;
          justify-content: flex-end;
        }
      }
      .log {
        .tips {
          padding: 0 36px 0 50px;
          height: 62px;
          line-height: 62px;
          cursor: pointer;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: Regular;
          color: #282828;
        }
        span {
          width: 100px;
          height: 62px;
          background: #0052d9;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: Regular;
          color: white;
          cursor: pointer;
        }
        span:first-of-type {
          background: #ffffff;
          color: #282828;
        }
      }
    }
    .head {
      height: 48px;
      background: #3d485d;
      position: relative;
      z-index: 9;
      .pointer {
        cursor: pointer;
      }
      .tag {
        width: 81px;
        height: 20px;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        color: #ffffff;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .scan {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #ffffff;
        display: flex;
        align-items: center;
      }
      .info {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #ffffff;
        line-height: 20px;
        padding: 0 16px 0 10px;
      }
      img {
        width: 14px;
        height: 14px;
      }
    }
  }
  .cont {
    min-height: 700px;
    background-color: #f5f7fa;
  }
  .footer {
    padding: 0 240px;
    background-color: #f5f7fa;
    .tab {
      padding-top: 40px;
      padding-bottom: 27px;
      border-bottom: 1px solid #d2d7dc;
      background: #f5f7fa;
      display: flex;
      align-items: center;
      justify-content: space-between;
      div {
        display: flex;
        align-items: center;
      }
      img {
        width: 60px;
        height: 60px;
        margin-right: 20px;
      }
    }
    .share {
      padding: 42px 0 24px;
      align-items: flex-start;
      .left {
        display: flex;
        flex: 1;
        .view {
          padding-right: 100px;
          div {
            font-size: 14px;
            font-family: PingFang TC, PingFang TC-Regular;
            font-weight: Regular;
            text-align: left;
            color: #495866;
            line-height: 20px;
            padding: 10px 0;
            cursor: pointer;
          }
        }
        .title {
          font-size: 16px;
          font-family: PingFang TC, PingFang TC-Medium;
          font-weight: Medium;
          text-align: left;
          color: #202020;
          line-height: 22px;
          display: block;
          margin-bottom: 10px;
        }
      }
      .right {
        &-h1 {
          font-size: 16px;
          font-family: PingFang TC, PingFang TC-Medium;
          font-weight: Medium;
          text-align: left;
          color: #202020;
        }
        &-t1 {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: Regular;
          text-align: left;
          color: #495866;
          padding: 10px 0;
        }
        &-img {
          display: flex;
          .img {
            width: 100px;
            height: 100px;
            background-color: white;
            margin-right: 20px;
            display: flex;
            align-items: center;
            justify-items: center;
            img {
              width: 90px;
              height: 90px;
              background: red;
            }
          }
        }
        &-phone {
          font-size: 14px;
          font-family: PingFang TC, PingFang TC-Regular;
          font-weight: Regular;
          text-align: left;
          color: #495866;
          line-height: 20px;
          padding: 7px 0 19px;
        }
        .btn {
          .el-button {
            width: 240px;
            height: 44px;
            border-radius: 2px;
          }
        }
      }
    }
    .link {
      height: 80px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      text-align: center;
      color: #495866;
      border-top: 1px solid #d2d7dc;
    }
  }
}
</style>